<template>
  <div class="message">
    <van-nav-bar
      title="我的下级用户"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    />
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
        >
          <div
            class="list-item"
            v-for="i in list"
            :key="i.id"
            :title="i.nickname"
            @click="goDetails(i.id)"
          >
            <div class="left">
              <van-image
                :round="true"
                width="50px"
                height="50px"
                fit="cover"
                :src="i.avatar"
              />
              <span>{{ i.nickname }}</span>
            </div>
            <div class="right">
              <span class="circle" v-if="i.is_read === '0'"></span>
              <van-icon name="arrow" />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <noData :list="list" :lastPage="last_page" :page="page" />
    </div>
  </div>
</template>
<style></style>
<script setup>
import { useRouter } from "vue-router";
import noData from "@/components/noData/noData.vue";
const router = useRouter();
import { ref } from "vue";
const list = ref([]);
const last_page = ref(0);
const page = ref(1);
import { belowList } from "@/services";
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const getList = async () => {
  let res = await belowList({ page: page.value });
  list.value = list.value.concat(res.data.data);
  last_page.value = res.data.last_page;
  if (page.value == last_page.value || last_page.value == 0) {
    finished.value = true;
    return;
  }
  page.value++;
};
const onLoad = () => {
  //滚动条与底部距离小于 offset 时触发,offset默认300
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }
  if (page.value == last_page.value) {
    getList();
    finished.value = true;
    return;
  } else {
    loading.value = false;
    getList();
  }
};

const onRefresh = () => {
  last_page.value = 0;
  page.value = 1;
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
// 返回按钮
const onClickLeft = () => {
  router.back();
};
const goDetails = (e) => {
  router.push({
    path: "/subordinateDetails",
    query: {
      id: e,
    },
  });
};
</script>

<style lang="scss" scoped>
.message {
  .list {
    padding: 20px;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.6);
      margin-top: 10px;

      .left {
        color: #313131;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        align-items: center;
        span {
          flex: 1;
          margin-left: 10px;
        }
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;

        .circle {
          width: 6px;
          height: 6px;
          background: #2cb9a4;
          border-radius: 50%;
          display: inline-block;
        }

        .arrow {
        }

        i {
          color: #b6b6b6;
          margin-left: 5px;
        }
      }

      i {
        color: #2cb9a4;
        margin-right: 10px;
      }
    }
  }
}
</style>
